<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='UTF-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
    <title>放大镜</title>
    <style>
        *{margin:0;padding:0}
        img{display:block}
        #box{width:300px;height:240px;position:relative;top:50px;left:50px}
        #box .littleImg{width:100%}
        #box .mask{position:absolute;top:0;left:0;width:60px;height:60px;background-color:rgba(0,0,0,.3);display:none}
        #box .mask:hover{cursor:all-scroll}
        #box .magnify{position:absolute;top:0;width:300px;height:240px;transform:translate(120%);border:1px solid #000;display:none;overflow:hidden}
        #box .magnify .bigImg{position:absolute;top:0;left:0}
    </style>
    <script src="./js/Store.js"></script>
</head>
<body>
    <div id="box">
        <div class="mask"></div>
        <img src="./pic/1280x1024.png" alt="" class="littleImg">
        <div class="magnify">
            <img src="./pic/1280x1024.png" alt="" class="bigImg">
        </div>
    </div>
</body>
</html>
<script>

    new store.Magnifying('box');

</script>